<template>
  <div>
    <van-nav-bar fixed left-arrow @click-left="$utils.back($route.path)">
      <template #title>
        <div class="flex-s-c fs-28 br-32 title-box">
          <div class="flex-1 lh-lg plr-25 " :class="active === 0 ? 'active' : ''" @click="active = 0">附近门店</div>
          <div class="flex-1 lh-lg plr-25 " :class="active === 1 ? 'active' : ''" @click="active = 1">我的关注</div>
        </div>
      </template>
    </van-nav-bar>
    <div class="has-top has-bottom">

      <!-- 门店列表 -->
      <bussiness-item v-for="(item, index) in bussinessList" type="nearbyStore" :key="index" :bussinessItem="item" />
    </div>
  </div>
</template>

<script>
import bussinessItem from 'components/bussinessItem'
export default {
  components: { bussinessItem },
  data() {
    return {
      bussinessList: [
        {
          id: 1,
          imgUrl: '',
          StoreName: '米斯韦尔ce测晒十大十大杀手 是大红色的疯狂打',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: true
        },
        {
          id: 2,
          imgUrl: '',
          StoreName: '米斯韦尔',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: true
        },
        {
          id: 3,
          imgUrl: '',
          StoreName: '米斯韦尔',
          BusinessHours: '10:00-24:00',
          tag: ['全国连锁', '打骨折'],
          Distance: 300,
          isLike: false
        }
      ],
      active: 0
    }
  },
  methods: {},
  computed: {},
  watch: {
    active(newVal, oldVal) {
      console.log('active: ' + newVal, oldVal)
    }
  },
  created() {}
}
</script>
<style lang="scss" scoped>
.title-box {
  border: 1px solid;
  overflow:hidden;
  @include border-primary();
  .active {
    @include bg-primary();
    color: $colorF;
  }
}
</style>
